<template>
  <div>
    <input type="file" @change="uploads">  
    <p></p>
    <img :src="imgUrl">

    <!-- <button @click="aaa">123123</button> -->
  </div>
</template>
<script>
import axios from "axios";
export default {
  data(){
    return {
      imgUrl:'',
    }
  },
  methods:{
    uploads(e){
        const file=e.target.files[0];//获取到当前文件对象

        let URL=window.URL||window.webkitURL; // 与上传没有关系（可选）
        this.imgUrl=URL.createObjectURL(file); // 这是为了显示图片而已， 与上传没有关系（可选）
        console.log(this.imgUrl)
        // 传递一个 FormData 对象 即可 
        let formData=new FormData();
        formData.append('file',file); // 'file' 可变 相当于 input 表单的name 属性
        // 服务器只需按照正常的上传程序代码即可
        //  this.$http.post('/upload.php',formData).then(rs=>{
        //      console.log(rs.data)
        //   }).catch(err=>{
        //      console.log(err)
        //   })
        axios({
            method: 'post',
            url: '/ImgFile',
            headers:{// 这里可设置所有的请求头
                'Content-Type':'application/x-www-form-urlencoded', //该项建议设置 如果未 POST请求时 数据未做处理时会出现错误，最理想的解决方法就是 直接设置该项
            },
            data: {
                file: file.name
            }
        })
        .then(function(res){
            console.log(res)
            // uri = response.data.url
            
            // var that = this;
            // reader.onloadend = function(){
            //     that.imgs.push(uri);
            //     // thst.reader.
            // }
        })
        .catch(function(error){
            console.log('上传图片出错！');
        })  
        
        
    },

    // aaa:function(){
    //     var that = this
    //     let postData = this.$qs.stringify({
    //         "aa":"ss",
    //         "aaaa":"ss"
    //       });
    //     axios({
    //         method: 'post',
    //         url: 'http://huiwanzhong.ay1.cc/admin/merchant/login',
    //         headers:{// 这里可设置所有的请求头
    //             'Content-Type':'application/x-www-form-urlencoded', //该项建议设置 如果未 POST请求时 数据未做处理时会出现错误，最理想的解决方法就是 直接设置该项
    //         },

    //         data: {
    //             postData
    //         }
    //     })
    //     .then(function(res) {
    //       //console.log(res.data.data);
    //       that.shopList = res.data.data
    //     })
    //     .catch(function(error) {
    //       console.log(error);
    //     });
    // },
    // mounted() {
    //     this.aaa();
    // }
  }
}
</script>
